<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>预约申请列表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport"
          content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="css/weui.css"/>
    <link rel="stylesheet" href="css/example.css"/>
    <link rel="stylesheet" href="css/jquery-weui.css">
    <script type="text/javascript"
            src="https://api.map.baidu.com/api?v=2.0&ak=pQFgFpS0VnMXwCRN6cTc1jDOcBVi3XoD"></script>
    <script type="text/javascript" src="js/accessStat.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <style>
        ul {
            list-style: none;
            border-bottom: 1px solid #e8e8e8;
        }

        li {
            margin: 0px;
            padding: 0px;
            height: 123px;
            padding: 0px;
            border-bottom: 1px solid #ffffff;
            background-color: white;
            display: block;
            zoom: 1;
        }

        .page__hd {
            padding: 18px;
        }
    </style>
</head>
<body>
<div class="list-main-mian weui-form-preview infinite weui-pull-to-refresh" id="listwrap"
     style="height:100%;overflow:auto;">
    <div class="weui-pull-to-refresh__layer">
        <div class='weui-pull-to-refresh__arrow'></div>
        <div class='weui-pull-to-refresh__preloader'></div>
        <div class="down">下拉刷新</div>
        <div class="up">释放刷新</div>
        <div class="refresh">正在刷新</div>
    </div>


    <div class="page__hd">
        <h1 class="page__title">预约申请列表</h1>
    </div>
    <div class="weui-cells weui-cells_form">
        <div class="weui-panel weui-panel_access">
            <div id="count" class="weui-panel__hd"></div>
        </div>
        <div id="ul">

        </div>
    </div>
</div>
<div class="weui-loadmore">
    <i class="weui-loading"></i>
    <span class="weui-loadmore__tips">正在加载</span>
</div>

</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="../../js/jquery-weui.js"></script>
<script type="text/javascript">

    var url = "/shables/baiduMap/getAssetsByDistanceImg.do";

    var limit = 10;
    var page = 1;
    loadlist(limit, page);

    $(".weui-loadmore").hide();
    $(".weui-cells__title").hide();

    var loading = false; //状态标记

/*    //JS初始化下拉刷新
    $('#listwrap').pullToRefresh().on("pull-to-refresh", function () {
        console.log("loading===", loading);
        limit = 10;
        page = 1;
        $("#ul").html("");
        loading = false;
        loadlist(limit, page);
        $('#listwrap').pullToRefreshDone();
    });*/

    //下拉刷新
    $('#listwrap').pullToRefresh().on("pull-to-refresh", function () {
        $('#listwrap').infinite();
        limit = 10;
        page = 1;
        $("#ul").html("");
        loading = false;
        loadlist(limit,page);
        if (loading) loading = false;
        $('#listwrap').pullToRefreshDone();
    });

/*

    $('#listwrap').infinite().on("infinite", function () {
        console.log("loading", loading);
        if (loading) return;
        loading = true;
        page = page + 1;
        $(".weui-loadmore").show();
        setTimeout(function () {
            loadlist(limit, page);
            loading = false;
        }, 1500);   //模拟延迟
    });
*/

    //上拉加载
    $('#listwrap').infinite().on("infinite", function () {
        if (loading)
            return;
        page = page + 1;
        $(".weui-loadmore").show();
        loading = true;
        setTimeout(function () {
            loadlist(limit,page);
            loading = false;
        }, 1500);   //模拟延迟

    });

    function loadlist(limit, page) {
        // $("#ul").empty();
        var html = "";
        $.ajax({
            type: "post",
            async: false,
            url: "/shambles/mobile/booth/checkSubscribe.do",
            data: {
                "pageSize": limit,
                "pageIndex": page,
                "status": 0
            },
            success: function (data) {
                    var count = data.response.total;
                    var countSize = count + "条预约"
                    $("#count").children().remove();
                    $("#count").text(countSize);
                    var list = data.response.list;
                    if (list.length > 0 || list != null) {
                        var i = 0;
                        for (i; i < list.length; i++) {
                            var id = list[i].id;
                            var subscribeOpenId = list[i].subscribeOpenId;
                            var time = actionTime(list[i].subscribeTime);
                            var name = list[i].subscribeName;
                            var hre = "check.html?id=" + id;
                            hre = encodeURI(hre);
                            html = "<div class='weui-cells'>" +
                                " <a class='weui-cell weui-cell_access' href='" + hre + "'>" +
                                " <div class='weui-cell__hd'>" +
                                " <div class='weui-cell__hd'><img src='../../img/suc.png' height='50' width='50'/>" +
                                " </div>" +
                                " </div>" +
                                " <div class='weui-cell__bd' style='padding-left: 30px;'>" +
                                " <p >" + list[i].subscribeName + "</p>" +
                                " <p style='font-size: 12px'>" + time + "</p>" +
                                " </div>" +
                                " <div class='weui-cell__ft'>" +
                                " <p>预约类型</p>" +
                                " </div>" +
                                " </a>" +
                                " </div>";
                            $("#ul").append(html);
                        }
                        if (i < limit) {
                            html = "<li><div class=\"weui-cells__title\" >已无更多数据</div></li>";
                            $("#ul").append(html);
                            $('#listwrap').destroyInfinite();
                            loading = true;
                        }

                    } else {
                        html = "<div class='weui-cells__title' >已无更多数据</div>";
                        $("#ul").append(html);
                        loading = true;
                    }
                $(".weui-loadmore").hide();
            }
        })
    }

    function actionTime(value) {
        var date = new Date(value);
        Y = date.getFullYear() + '-';
        M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date
                .getMonth() + 1)
            + '-';
        D = date.getDate() + ' ';
        h = date.getHours() + ':';
        m = date.getMinutes() + ':';
        s = date.getSeconds();
        return Y + M + D + h + m + s;
    }
</script>